<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/examples/inheritance.js"></script>
</head>
<body>
	<div class="post">
		<div class="clearfix" style="margin-bottom: 20px;">
			<div class="info">
				<h2>
					<a href="http://www.quizzpot.com/2009/03/herencia-en-javascript/">Herencia
						en JavaScript</a>
				</h2>
				<span class="smalltext">Mar 18, 2009 | <a
					href="http://www.quizzpot.com/category/es/" title="Español">Español</a>
					| By <a href="http://www.quizzpot.com/author/admin/"
					title="Posts by Crysfel" rel="author">Crysfel</a> | <a
					href="http://www.quizzpot.com/2009/03/herencia-en-javascript/#comments"
					title="Comment on Herencia en JavaScript">6 Comments</a>
				</span>
				<p>JavaScript tiene una forma única de crear objetos y realizar
					herencia entre ellos, a esta forma se le llama “prototypal
					inheritance”, básicamente un objeto puede heredar métodos y
					propiedades de otros objetos creando un prototipo para generar
					nuevos objetos.</p>
			</div>
			<div class="tns">
				<div>
					<a href="http://www.quizzpot.com/2009/03/herencia-en-javascript/"><img
						src="http://www.quizzpot.com/wp-content/uploads/2009/03/herencia.jpg"
						alt="Herencia en JavaScript"></a>
				</div>
			</div>
		</div>

		<div class="author clearfix">
			<img alt=""
				src="http://1.gravatar.com/avatar/7344c04fee0e5535e239b2a83623041a?s=80&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&amp;r=G"
				class="avatar avatar-80 photo" height="80" width="80"> <strong>Author:
				<a href="http://www.crysfel.com ">Crysfel</a>
			</strong>
			<p>
				I'm a software developer with 6+ years of experience, when I'm not
				developing software I may be writing a tutorial, you can follow me
				on <a href="http://twitter.com/crysfel">twitter</a>
			</p>
		</div>

		<div class="control-panel">
			<p class="clearfix">
				<a
					href="http://www.quizzpot.com/wp-content/uploads/2009/03/inheritance-src.zip"
					class="btn download"><span>Download</span></a>
			</p>
		</div>


		<p>La herencia de prototipo se realiza utilizando la propiedad
			“prototype” que se encuentra en todos los objetos. En JavaScript la
			herencia es simple pero con un poco de trabajo se puede obtener
			herencia múltiple; en este tema se muestra como realizar la herencia
			simple.</p>
		<p>Es importante mencionar que la propiedad “prototype” sólo puede
			heredar de otros objetos y no de otros prototipos o funciones
			constructoras. A continuación se muestra un ejemplo para una mejor
			comprensión:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="comment">//Super&nbsp;"class"</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;Animal&nbsp;=&nbsp;</span><span
						class="keyword">function</span><span>(type){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.type&nbsp;=&nbsp;type;&nbsp;&nbsp;</span></span></li>
				<li class=""><span>}&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span>Animal.prototype.getType&nbsp;=&nbsp;<span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">return</span><span>&nbsp;</span><span
						class="keyword">this</span><span>.type;&nbsp;&nbsp;</span></span></li>
				<li class=""><span>}&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;Dog&nbsp;=&nbsp;</span><span
						class="keyword">function</span><span>(options){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.breed&nbsp;=&nbsp;options.breed;&nbsp;&nbsp;</span></span></li>
				<li class=""><span>}&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//Inheritance</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>Dog.prototype&nbsp;=&nbsp;<span
						class="keyword">new</span><span>&nbsp;Animal(</span><span
						class="string">'Dog'</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="comment">//attach&nbsp;methods&nbsp;to&nbsp;the&nbsp;Dog&nbsp;"class"</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>Dog.prototype.run&nbsp;=&nbsp;<span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;console.debug(<span
						class="string">'the&nbsp;'</span><span>+</span><span
						class="keyword">this</span><span>.breed+</span><span
						class="string">'&nbsp;'</span><span>+</span><span class="keyword">this</span><span>.type+</span><span
						class="string">'&nbsp;is&nbsp;running!'</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class=""><span>}&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="comment">//new&nbsp;instance</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;beagle&nbsp;=&nbsp;</span><span
						class="keyword">new</span><span>&nbsp;Dog({breed:</span><span
						class="string">'Beagle'</span><span>});&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//calling&nbsp;a&nbsp;method&nbsp;of&nbsp;the&nbsp;super&nbsp;"class"</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>console.debug(beagle.getType());&nbsp;&nbsp;</span></li>
				<li class=""><span>beagle.run();&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">//Super "class"
var Animal = function(type){
	this.type = type;
}

Animal.prototype.getType = function(){
	return this.type;
}

var Dog = function(options){
	this.breed = options.breed;
}

//Inheritance
Dog.prototype = new Animal('Dog');

//attach methods to the Dog "class"
Dog.prototype.run = function(){
	console.debug('the '+this.breed+' '+this.type+' is running!');
}
//new instance
var beagle = new Dog({breed:'Beagle'});

//calling a method of the super "class"
console.debug(beagle.getType());
beagle.run();
</pre>
		<p>La parte más importante del ejemplo anterior es donde se
			realiza la herencia, “Dog.prototype = new Animal(‘Dog’);”. La
			variable Dog hace referencia a la función constructora del objeto
			Dog, “new Animal()” está creando un objeto Animal el cual es asignado
			al prototipo de la función constructora del objeto “Dog”; de esta
			forma el objeto Dog contendrá todos los método y propiedades el
			objeto “Animal” cuando se creen nuevas instancias.</p>
		<h3>Conclusión</h3>
		<p>La herencia simple es algo que utilizaremos cuando
			desarrollemos componentes, es necesario que tengamos este concepto en
			mente.</p>
		<div class="wp_twitter_button"
			style="float: right; margin-left: 10px;">
			<iframe
				src="http://platform.twitter.com/widgets/tweet_button.html#_=1323142829378&amp;count=horizontal&amp;counturl=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fherencia-en-javascript%2F&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fherencia-en-javascript%2F&amp;text=Herencia%20en%20JavaScript%20%C2%BB%20Quizzpot&amp;url=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fherencia-en-javascript%2F&amp;via=quizzpot"
				allowtransparency="true" frameborder="0" scrolling="no"
				class="twitter-share-button twitter-count-horizontal"
				style="width: 110px; height: 20px;"
				title="Twitter For Websites: Tweet Button"></iframe>
		</div>
		<iframe
			src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fherencia-en-javascript%2F&amp;layout=standard&amp;show_faces=true&amp;width=300&amp;height=25&amp;action=like&amp;font=trebuchet ms&amp;colorscheme=light"
			id="fbLikeIframe" name="fbLikeIframe" scrolling="no" frameborder="0"
			allowtransparency="true" class="fbLikeContainer"
			style="border: none; overflow: hidden; width: 300px; height: 25px; display: inline;"></iframe>
	</div>
</body>
</html>